<template>
  <div
    v-for="item of fileNavList"
    :class="[selectedPage === item.page ? 'bg-FileNavActive text-sky-600' : '']"
    class="hover:bg-FileHover my-2 p-2"
    @click="selectedPage = item.page"
  >
    <p class="flex flex-row justify-center items-center gap-1">
      <span :class="item.icon" style="font-size: 20px"></span>
      <span>{{ item.label }}</span>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { FilePage, IFileNavList } from "@/types/file.ts";
const selectedPage = defineModel("selectedPage", {
  type: Number,
  required: true,
  default: FilePage.owner,
});

const fileNavList: IFileNavList[] = [
  {
    label: "我的文件",
    icon: "iconfont icon-gengduo1",
    page: FilePage.owner,
  },
  {
    label: "好友文件",
    icon: "iconfont icon-zhanghao",
    page: FilePage.session,
  },
  {
    label: "群聊文件",
    icon: "iconfont icon-friend",
    page: FilePage.group,
  },
];
</script>

<style lang="scss" scoped></style>
